'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ListView,
    Platform,
    Modal,
    StatusBar
} from 'react-native';
import Global from '../Commom/GlobalConst';
import ImagePicker from 'react-native-image-picker';
import Gallery from 'react-native-gallery';
import MyChangePassWordContainer from '../Containers/MyChangePassWordContainer';
import MyChangeUserNameContainer from '../Containers/MyChangeNickNameContainer';
import UserAPIService from '../Commom/UserAPIService';
import * as types from '../Commom/ActionConst';
import {userInfo} from '../Action/UserAction';
export default class MyAccountSettingsPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            avatarSource: require('../../Image/icon_not_logged.png'),
            avatarUrl: '../../Image/icon_not_logged.png',
            showAvatar: false,
            canShowAvatar: false,
            imagePath: '',
        };
        this.changeHead = this.changeHead.bind(this);
        this.changePassWord = this.changePassWord.bind(this);
    }

    BackAction() {
        this.props.navigator.pop();
    }

    componentDidMount() {
        const {dispatch} = this.props;
        var head_picture = this.props.head_picture;
        if (head_picture != null && head_picture != '') {
            this.setState({
                avatarSource: {uri: head_picture},
                avatarUrl: head_picture,
                canShowAvatar: true
            })
        }
    }

    changeHead() {
        var options = {
            title: '头像编辑',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '从相机拍照获取',
            chooseFromLibraryButtonTitle: '从手机相册选择',
            allowsEditing: true, // 当用户选择过照片之后是否允许再次编辑图片
            maxWidth: 750,
            maxHeight: 1280,
            quality:0.75,
        };
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
            }
            else if (response.error) {
            }
            else if (response.customButton) {
            }
            else {
                let source;
                let url;
                let path;
                if (Platform.OS === 'android') {
                    url = response.uri;
                    source = {uri: url};
                    path=response.path;
                } else {
                    url = response.uri.replace('file://', '');
                    source = {uri: url};
                    path=response.uri.replace('file://', '');
                }
                this.setState({
                    avatarSource: source,
                    avatarUrl: url,
                    canShowAvatar: true,
                    imagePath: path,
                });
                const {dispatch} = this.props;
                UserAPIService.updateUserInformation(Global.Const.token, Global.Const.registeredId, null, this.state.imagePath).then((ret)=> {
                    dispatch({type: types.kUserInformationReceived, head_picture: this.state.imagePath, result: ret});
                    dispatch(userInfo(Global.Const.token, Global.Const.registeredId));
                }).catch((err)=> {
                    dispatch({type: types.kUserInformationReceived, result: null});
                });
            }
        });
    }

    ClickAction(number) {
        const {UserReducer}=this.props;
        switch (number) {
            case 0:
                this.changeHead();
                break;
            case 1:
                if (this.state.canShowAvatar) {
                    this.setState({
                        showAvatar: true,
                    });
                } else {
                    this.changeHead();
                }
                break;
            case 2:
                this.props.navigator.push({
                    id: 'MyChangeUserNameContainer',
                    component: MyChangeUserNameContainer,
                    passProps: {},
                });
                break;
            case 3:
                this.props.navigator.push({
                    id: 'MyChangePassWordContainer',
                    component: MyChangePassWordContainer,
                    passProps: {
                        phone:UserReducer.phone,
                    },
                });
                break;
        }
    }


    changePassWord() {
        const {UserReducer}=this.props;
        console.log(UserReducer.isThirdLogin);
        if (UserReducer.isThirdLogin === true) {
            return null;
        } else {
            return (
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.ClickAction(3)}>
                    <View
                        style={{backgroundColor:'white',width: Global.Const.size.width,height: 50,borderBottomWidth: 1,borderColor: Global.Const.transparent,alignItems: 'center',flexDirection: 'row'}}>
                        <Text style={{marginLeft:15,fontSize:16,color:Global.FontColor.DimGray}}>修改密码</Text>
                        <View style={{flex: 1,alignItems: 'flex-end'}}>
                            <Image style={{ resizeMode:'contain',marginRight: 10,}}
                                   source={require('../../Image/icon_go.png')}></Image>
                        </View>
                    </View>
                </TouchableOpacity>

            );
        }
    }

    render() {
        var imageslist = [];
        imageslist.push(this.state.avatarUrl);
        return (
            <View style={styles.container}>
                <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                    <View style={{marginTop:24,alignItems:'center'}}>

                        <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.BackAction()}>
                                <Image style={{resizeMode:'contain',width:21,height:21}}
                                       source={require('../../Image/icon_back.png')}
                                ></Image>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>账号设置</Text>
                    </View>
                </View>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.ClickAction(0)}>
                    <View
                        style={{backgroundColor:'white',width: Global.Const.size.width,height: 100,borderBottomWidth: 1,borderTopWidth: 4,borderColor: Global.Const.transparent,alignItems: 'center',flexDirection: 'row'}}>
                        <Text style={{marginLeft:15,fontSize:16,color:Global.FontColor.DimGray}}>头像</Text>
                        <View style={{flex: 1,justifyContent: 'flex-end',flexDirection: 'row',alignItems:'center'}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.ClickAction(1)}>
                                <Image style={{ width: 70,height: 70,borderRadius:35}}
                                       source={this.state.avatarSource}></Image>
                            </TouchableOpacity>

                            <Image style={{ resizeMode:'contain',marginRight: 10,marginLeft:15}}
                                   source={require('../../Image/icon_go.png')}></Image>

                        </View>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.ClickAction(2)}>
                    <View
                        style={{backgroundColor:'white',width: Global.Const.size.width,height: 50,borderBottomWidth: 1,borderColor: Global.Const.transparent,alignItems: 'center',flexDirection: 'row'}}>
                        <Text style={{marginLeft:15,fontSize:16,color:Global.FontColor.DimGray}}>昵称</Text>
                        <View style={{flex: 1,alignItems: 'flex-end'}}>
                            <Image style={{resizeMode:'contain',marginRight: 10,}}
                                   source={require('../../Image/icon_go.png')}></Image>
                        </View>
                    </View>
                </TouchableOpacity>
                {this.changePassWord()}
                <Modal visible={this.state.showAvatar} transparent={true} animationType={"fade"}
                       onRequestClose={()=>{}}>
                    <StatusBar hidden={false} barStyle="light-content"/>
                    <Gallery
                        style={{flex: 1, backgroundColor: '#000000'}}
                        initialPage={0}
                        pageMargin={10}
                        images={imageslist}
                        onSingleTapConfirmed={() => {
                            this.setState({
                                showAvatar:false,
                            });
                        }}
                    />
                </Modal>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});